<template>
    <div id="main" style="height: calc(100vh - 60px)">
        <div id="register">
            <h2>用户注册</h2>
            <el-form :model="user" :rules="rules" ref="userForm">
                <el-form-item prop="email">
                    <el-input v-model="user.email" placeholder="请输入邮箱" type="text"
                              prefix-icon="el-icon-message"
                              style="margin:5px 0">
                    </el-input>
                </el-form-item>
                <el-form-item prop="userPassword">
                    <el-input v-model="user.userPassword" placeholder="密码：请输入8-16位字符，包含数字字母两种" type="text"
                              prefix-icon="el-icon-unlock">
                    </el-input>
                </el-form-item>
                <el-form-item prop="confirmPassword">
                    <el-input v-model="user.confirmPassword" placeholder="确认密码" type="text"
                              prefix-icon="el-icon-unlock"
                              style="margin:5px 0">
                    </el-input>
                </el-form-item>
                <el-form-item prop="code">
                    <el-input style="width: 190px" v-model="user.code" placeholder="请输入验证码" type="text"
                              prefix-icon="el-icon-unlock">
                    </el-input>
                    <el-button style="height: 40px;width: 110px" type="primary" @click="getCode">获取验证码</el-button>
                </el-form-item>
            </el-form>
            <el-button class="btn" @click="register">注册</el-button>
            <div>
                <p style="margin-left: 100px;margin-top: 10px">
                    <a style="float: right;margin-right: 100px;cursor: pointer"
                       @click="$router.push('/userlogin')">已有账号？去登录</a></p>
            </div>
        </div>
    </div>
</template>

<script>
    import request from "@/request";

    export default {
        name: "UserRegister",
        data(){
            const regMobile = /^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/
            const regMobile1=/^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/
            var checkmail = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入邮箱'));
                }
                setTimeout(() => {
                    if (!regMobile.test(value)) {
                        callback(new Error('请输入正确的邮箱'));
                    } else {
                        callback();
                    }
                }, 500);
            };
            var checkpassword = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入密码'));
                }
                setTimeout(() => {
                    if (!regMobile1.test(value)) {
                        callback(new Error('请输入8-16位字符，包含数字字母两种'));
                    } else {
                        callback();
                    }
                }, 500);
            };
            var checkconfirm = (rule, value, callback) => {
                if (!value) {
                    return callback(new Error('请输入确认密码'));
                }
                setTimeout(() => {
                    if (value!=this.user.userPassword) {
                        callback(new Error('两次输入不一致，请重新输入'));
                    } else {
                        callback();
                    }
                }, 500);
            };
            return{
                user:{},
                rules: {
                    email: [
                        {required: true, validator: checkmail, trigger: 'blur'},
                    ],

                    userPassword: [
                        {required: true, validator:checkpassword, trigger: 'blur'},
                    ],
                    confirmPassword:[
                        {required:true, validator:checkconfirm,trigger:'blur'}
                    ],
                    code: [
                        {required: true, message: '请输入邮箱验证码', trigger: 'blur'},
                        {min: 4, max: 4, message: '长度四位', trigger: 'blur'}
                    ],
                },
            }
        },
        methods:{
            getCode(){
                if(!this.user.email){
                    this.$message.warning("请输入邮箱")
                    return
                }
                if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.user.email)){
                    this.$message.warning("请输入正确的邮箱格式")
                    return;
                }
                request.get("/user/registeremail/"+this.user.email).then(res=>{
                    if(res.code==='200'){
                        this.$message.success("发送成功")
                    }else {
                        this.$message.error(res.msg)
                    }
                })
            },
            register() {
                this.$refs['userForm'].validate((valid) => {
                    if (valid) {  // 表单校验合法
                        request.post("/user/register", this.user).then(res => {
                            if (res.code === '200') {
                                console.log(res)
                                this.$router.push("/userlogin")
                                this.$message.success("注册成功,您的账号为"+res.data)
                            } else {
                                this.$message.error(res.msg)
                            }
                        })
                    }
                });
            },
        }
    }
</script>

<style scoped>
    #main{
        background-image: url('../../assets/loginBk.jpg');
        background-size: inherit;
        background-repeat: no-repeat;
        background-size: cover;
    }
    #register{
        background-color: rgba(255,255,255,0.7);
        height: 600px;
        width: 500px;
        position: absolute;
        right: 120px;
        top: 100px;
    }
    .btn {
        width: 300px;
        height: 50px;
        margin-top: 50px;
        background-color: beige;
        font-size: 20px;
    }
    .el-input {
        width: 300px;
        height: 50px;
    }
</style>